<template>
	<view class="list">
		<view v-if="orderList.length===0">
			<view class="no-data">
				<text>暂无影票</text>
			</view>
		</view>
		<view v-else>
			<view class="list-item" v-for="item in orderList" :key="item.orderCode"
				@click="toOrderPage(item.orderCode,item.orderStatus,item.seatList)">
				<view class="item-title">
					<text>订单号：{{item.orderCode}}</text>
					<text>{{ticketStatus(item.orderStatus)}}</text>
				</view>
				<view class="item-info">
					<view style="width: 80%;">
						<view class="item-film-name">
							<text>{{item.filmName}}</text>
							<text style="margin-left: 15rpx;">x{{item.count}}</text>
						</view>
						<view class="item-film-screen">
							<!-- <text>{{resloveSession(item.seatList[0].seatCode)}}号厅</text> -->
							<!-- <text v-for="(seat,index) in item.seatList"
								:key="index">{{resloveRow(seat.seatCode)}}排{{resloveRow(seat.seatCode)}}号</text> -->
						</view>
					</view>
					<view class="poster">
						<!-- <image :src="item.imageurl" mode=""></image> -->
					</view>

				</view>
				<view class="item-price">
					<text v-if="item.payInfo.payChannel=='CARD'">会员卡支付：<text
							class="price">￥{{item.payInfo.payPrice}}</text><text
							class="fee">(内含服务费￥{{getServerFee(item.seatList)}})</text></text>
					<text v-if="item.payInfo.payChannel=='WX'">微信支付：<text class="price">{{item.orderTotal}}</text><text
							class="fee"
							v-if="getServerFee(item.seatList)!=0">(内含服务费￥{{getServerFee(item.seatList)}})</text></text>
					<text v-if="item.payInfo.payChannel=='DY'">抖音券支付</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		quertTicketList
	} from '../../common/http/api.js'
	export default {
		props: ['orderList'],
		data() {
			return {

			};
		},

		methods: {
			toOrderPage(code, status, seatList) {
				const list = seatList.map(item => item.payPrice).join(',')
				const serviceFee = seatList.map(item => item.serviceFee).join(',')
				const _status = this.ticketStatus(status)
				uni.navigateTo({
					url: '../../pages/orderPage/orderPage?orderCode=' + code + '&statusText=' + _status
				})
			}
		},
		computed: {
			resloveSession() {
				return code => {
					let str = code
					return str.substr(str.length - 1, 1)
				}
			},
			resloveRow() {
				return code => {
					let str = code
					return str.substr(str.length - 2, 2)
				}
			},
			resloveCol() {
				return code => {
					let str = code
					return str.substr(str.length - 7, 2)
				}
			},
			getServerFee() {
				return list => {
					let serverFee = 0
					list.map(item => {
						// serverFee += 
						if (item.serviceFee && item.serviceFee > 0) serverFee = item.serviceFee
					})
					return serverFee * list.length
				}
			},
			ticketStatus() {
				return function(num) {
					if (num === "0") {
						return "已完成";
					} else if (num === "1") {
						return "待支付";
					} else if (num === "2") {
						return "待出票";
					} else if (num === "3") {
						return "支付成功";
					} else if (num === "4") {
						return "待退款";
					} else if (num === "5") {
						return "退款中";
					} else if (num === "6") {
						return "已退款";
					} else if (num === "7") {
						return "已取消";
					}
				};
			},
		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss">
	.no-data {
		width: 100vw;
		text-align: center;

		text {
			line-height: 140rpx;
			font-size: 26rpx;
			color: #999;
		}
	}

	.list {
		display: flex;
		background-color: #f0f0f5;
		align-items: center;
		width: 100vw;
		flex-direction: column;

		.list-item {
			background-color: #fff;
			width: 96vw;
			margin-top: 15rpx;
			border-radius: 15rpx;

			.item-title {
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;

				text {
					line-height: 80rpx;
					color: #999;
					font-size: 28rpx;
				}
			}

			.item-info {
				padding: 20rpx;
				border-bottom: 1px solid #f0f0f5;
				display: flex;

				.item-film-name {
					font-size: 32rpx;

					text:last-child {
						font-size: 28rpx;
						color: #999;
					}

				}

				.item-film-screen {
					margin-top: 20rpx;
					font-size: 28rpx;

					color: #999;

					text {
						margin-right: 10rpx;
					}
				}

				.poster {
					image {
						width: 120rpx;
						height: 180rpx;
					}
				}
			}

			.item-price {
				padding: 0 20rpx;
				font-size: 28rpx;


				text {
					line-height: 80rpx;


				}

				.price {
					color: red;
					font-weight: bold;

				}

				.fee {
					font-size: 22rpx;
					color: red;
				}
			}
		}
	}
</style>